<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画直线</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<script>
	window.onload = function(){
	
			//1
		var canvas = document.getElementById("canvas");

		//判断浏览器支不支持
		if (canvas.getContext('2d')) {
				//绘图位置

	 canvas.width =800;
	 canvas.height =880;
	 
	 var context = canvas.getContext("2d");//2d环境
	 
	
	// context.beginPath();
	 context.moveTo(100,100);//起点
	 context.lineTo(600,600);//连接点
	 context.lineTo(100,600);//下一点
	 context.lineWidth=5;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	 context.stroke();//绘制出来
	 
	 
	 context.beginPath();//表示全新的绘制 context.moveTo=context.beginPath()+ context.lineTo
	 context.lineTo(200,300);//起点
	 context.lineTo(400,500);
	 context.lineTo(600,200);
	 //context.lineTo(200,300);//回到原点表示封闭图,，不加 context.closePath()会留空隙（线条的宽度）
	 context.closePath();//表示封闭图形，如果图形闭合没有绘制完成也会自动闭合
	 context.fillStyle="red";//封闭的图形可以添加填充色
	
	 //注意要先执行填充色在执行描边，否则一部分线条宽度会被覆盖
	 
	 //基于状态设置
	 //没有全新
	 context.moveTo(250,350);//起点
	 context.lineTo(300,550);
	 context.lineTo(600,200);
	
	 
	 
	 context.lineWidth=10;//线条的宽度
	 context.strokeStyle="darkgoldenrod";//线的颜色
	 
	 
	 context.fill();//执行填充色
	 context.stroke();//执行绘制线条 
	 
	 
			
		}else{
			alert("当前浏览器不支持Canvas,请更换浏览器后再试");

		}
			

		
		
	}
	</script>
</html>
